<template>
  <div class="qrCode-container common-container">
    <div class="h-line h-line-first"></div>
    <div class="v-line v-line-first"></div>
    <div class="v-line v-line-second"></div>
    <div class="qrCode-box"></div>
    <div class="qrCode-content">
      <div class="qrCode-tab">
        <div class="tab-common" :class="{checked: isChecked == 'dynamic'}" @click="handleClick('dynamic')">动态二维码</div>
        <div class="tab-common" :class="{checked: isChecked == 'print'}" @click="handleClick('print')">打印二维码</div>
      </div>
      <dynamicQrCode v-if="isChecked == 'dynamic'"></dynamicQrCode>
      <printQrCode v-if="isChecked == 'print'"></printQrCode>
    </div>
  </div>
</template>

<script>

import dynamicQrCode from './conponents/dynamicQrCode'
import printQrCode from './conponents/printQrCode'
export default {
  name: 'index',
  components:{
    dynamicQrCode,
    printQrCode,
  },
  data(){
    return{
      text: 'localhost:8080/#/qrcode',
      isChecked: 'dynamic',
    }
  },
  methods:{
    handleClick(type){
      if(type == 'dynamic'){
        this.isChecked = 'dynamic'
      }else{
        this.isChecked = 'print'
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.qrCode-container{
  position: relative;
  background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),url('../../../assets/image/background.png');
  background-size: cover;
}
.h-line{
  position: absolute;
  width: calc(100% - 50px);
}
.h-line-first{
  top: 60px;
  border: 2px dashed #e5f3fd;
}
.v-line{
  position: absolute;
  height: calc(100vh - 180px);
}
.v-line-first{
  left: 30px;
  border: 2px solid #e5f3fd;
}
.v-line-second{
  left: 36px;
  border: 2px dashed #e5f3fd;
}
.qrCode-content{
  width: calc(100% - 40px);
  height: 100%;
  margin-left: 30px;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: left;
}
.qrCode-tab{
  width: 100%;
  height: 30px;
  display: flex;
  margin-bottom: 30px;
}
.tab-common{
  width: 120px;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  margin-right: 20px;
  text-align: center;
  cursor: pointer;
  color: #62afe3;
  border: 1px solid #62afe3;
}
.checked{
  background-color: #e5f3fd;
  color: #5e93b7;
  border: 1px dashed #62afe3;
}
</style>
